{% extends "finance/base.html" %}
{% load static %}
{% load custom_filters %}

{% block content %}
<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
    }

    .center-label {
        display: block;
        width: 100%;
        text-align: center;
    }

    #invoiceForm .row {
        margin-top: 0.5rem;
    }

    #invoiceForm .form-check {
        margin-bottom: 0.3rem;
    }

    .modal-xl .modal-body {
        max-height: 90vh;
        overflow-y: auto;
    }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Invoice Register</h2>
    <input type="text" id="searchInput" class="form-control" placeholder="Search Invoice No..."
        style="max-width: 300px; margin-right: 1rem;">
    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#invoiceModal"
            onclick="resetForm()">
            Add Invoice Register
        </button>
        <a href="{% url 'generate_pdf_invoice' %}"
        class="btn btn-secondary"
        target="_blank"
        rel="noopener noreferrer">
            Generate PDF Report
        </a>
        </a>
        <a href="{% url 'export_to_excel_invoice' %}" class="btn btn-secondary">Export to Excel</a>
    </div>

</div>

<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="invoiceTable">
        <thead class="table-dark">
            <tr>
                <th scope="col" class="align-middle">No</th>
                <th scope="col" class="align-middle">Vendor Code</th>
                <th scope="col" class="align-middle">Name</th>
                <th scope="col" class="align-middle">Invoice Code</th>
                <th scope="col" class="align-middle">Invoice No</th>
                <th scope="col" class="align-middle">Invoice Date</th>
                <th scope="col" class="align-middle">Description</th>
                <th scope="col" class="align-middle">Contract No</th>
                <th scope="col" class="align-middle">Currency</th>
                <th scope="col" class="align-middle">Invoice Amount</th>
                <th scope="col" class="align-middle">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if invoice %}
            {% for invno in invoice %}
            <tr data-id="{{ invno.id }}" data-vendorcode="{{ invno.vendorcode.vendorcode }}"
                data-vendorname="{{ invno.vendorcode.vendorname }}" data-kodeinv="{{ invno.kodeinv }}"
                data-invdate="{{ invno.invdate|date:'Y-m-d' }}" data-invno="{{ invno.invno }}"
                data-logdate="{{ invno.logdate|date:'Y-m-d' }}" data-duedate="{{ invno.duedate|date:'Y-m-d' }}"
                data-description="{{ invno.description }}" data-cnc="{{ invno.cnc }}"
                data-contractno="{{ invno.contractno.contractno|default:'' }}" data-srvperiod="{{ invno.srvperiod }}"
                data-currsign="{{ invno.currsign.currsign|default_if_none:'' }}" data-amount="{{ invno.amount }}"
                data-dpp="{{ invno.dpp }}" data-vat="{{ invno.vat }}" data-totalamount="{{ invno.totalamount }}"
                data-userdate="{{ invno.userdate|date:'Y-m-d' }}" data-findate="{{ invno.findate|date:'Y-m-d' }}"
                data-goods1="{{ invno.goods1 }}" data-goods2="{{ invno.goods2 }}" data-goods3="{{ invno.goods3 }}"
                data-goods4="{{ invno.goods4 }}" data-goods5="{{ invno.goods5 }}" data-goods6="{{ invno.goods6 }}"
                data-goods7="{{ invno.goods7 }}" data-goods8="{{ invno.goods8 }}" data-goods9="{{ invno.goods9 }}"
                data-goods10="{{ invno.goods10 }}" data-goods11="{{ invno.goods11 }}" data-goods12="{{ invno.goods12 }}"
                data-goods13="{{ invno.goods13 }}" data-goods14="{{ invno.goods14 }}" data-goods15="{{ invno.goods15 }}"
                data-goods16="{{ invno.goods16 }}" data-goodslist1="{{ invno.goodslist1 }}" data-so1="{{ invno.so1 }}"
                data-so2="{{ invno.so2 }}" data-so3="{{ invno.so3 }}" data-so4="{{ invno.so4 }}"
                data-so5="{{ invno.so5 }}" data-so6="{{ invno.so6 }}" data-so7="{{ invno.so7 }}"
                data-so8="{{ invno.so8 }}" data-so9="{{ invno.so9 }}" data-so10="{{ invno.so10 }}"
                data-so11="{{ invno.so11 }}" data-so12="{{ invno.so12 }}" data-so13="{{ invno.so13 }}"
                data-so14="{{ invno.so14 }}" data-so15="{{ invno.so15 }}" data-so16="{{ invno.so16 }}"
                data-solist1="{{ invno.solist1 }}">


                <td>{{ forloop.counter }}</td> <!-- Added row number -->
                <td>
                    {{ invno.vendorcode.vendorcode }}
                </td>
                <td>
                    {{ invno.vendorcode.vendorname }}
                </td>
                <td>{{ invno.kodeinv }}</td>
                <td>{{ invno.invdate|date:"d-m-Y" }}</td>
                <td>{{ invno.invno }}</td>
                <td>{{ invno.description }}</td>
                <td>{{ invno.contractno.contractno }}</td>
                <td>{{ invno.currsign.currsign }}</td>
                <td>{{ invno.amount|format_currency_dynamic:invno.currsign.currsign }}</td>

                <td>
                    <div class="d-flex gap-1">
                        <button type="button" class="btn btn-sm btn-secondary" onclick="editinvoice('{{ invno.id }}')">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                        <form method="POST" action="{% url 'delete_invoice' invno.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-danger"
                                onclick="return confirm('Are you sure you want to delete this Invoice No?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                        <!-- Tombol print -->
                        <a href="{% url 'print_invoice' invno.id %}" target="_blank" class="btn btn-sm btn-info">
                            <i class="bi bi-printer"></i>
                        </a>
                    </div>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="7" class="text-center">No Invoice No. found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<script>
    document.getElementById('searchInput').addEventListener('keyup', function () {
        let filter = this.value.toLowerCase();
        let rows = document.querySelectorAll('#invoiceTable tbody tr');

        rows.forEach(row => {
            let text = row.textContent.toLowerCase();
            row.style.display = text.includes(filter) ? '' : 'none';
        });
    });
</script>


<!-- invoice Modal -->
<div class="modal fade" id="invoiceModal" tabindex="-1" aria-labelledby="invoiceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl"> <!-- atau modal-lg -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold" id="invoiceModalLabel">Add Invoice Register</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <form id="invoiceForm" method="POST" action="{% url 'save_invoice' %}">
                    {% csrf_token %}
                    <input type="hidden" name="invoice_id" id="invoice_id">

                    <div class="row">
                        <!-- KIRI -->
                        <div class="col-md-6">
                            <label for="vendorcode" class="form-label">Vendor</label>
                            <select class="form-control" id="vendorcode" name="vendorcode" required>
                                <option value="">-- Select Vendor Code --</option>
                                {% for v in vendor %}
                                <option value="{{ v.vendorcode }}">{{ v.vendorcode }} - {{ v.vendorname }}</option>
                                {% endfor %}
                            </select>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="kodeinv" class="form-label">Invoice Code</label>
                                    <select class="form-control" id="kodeinv" name="kodeinv" required>
                                        <option value="">-- Select Type --</option>
                                        <option value="Non PI">Non PI</option>
                                        <option value="PI">PI</option>
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="invdate" class="form-label">Date</label>
                                    <input type="date" class="form-control" id="invdate" name="invdate" required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="invno" class="form-label">Invoice No</label>
                                <input type="text" class="form-control" id="invno" name="invno" required>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="logdate" class="form-label">Log Date</label>
                                    <input type="date" class="form-control" id="logdate" name="logdate" required>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="duedate" class="form-label">Due Date</label>
                                    <input type="date" class="form-control" id="duedate" name="duedate" required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <input type="text" class="form-control" id="description" name="description" required>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="cnc" class="form-label">Commitment/Non-Commitment</label>
                                    <select class="form-control" id="cnc" name="cnc" required>
                                        <option value="">-- Select Type --</option>
                                        <option value="Commitment">Commitment</option>
                                        <option value="Non-Commitment">Non-Commitment</option>
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="contractno" class="form-label">Contract No</label>
                                    <select class="form-control" id="contractno" name="contractno">
                                        <option value="">-- Select Contract --</option>
                                        {% for kontrak in contracts %}
                                        <option value="{{ kontrak.contractno }}"
                                            data-vendor="{{ kontrak.vendorcode.vendorcode }}">
                                            {{ kontrak.contractno }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            
                            <!-- <div class="mb-3">
                                <label class="form-label">Notes</label>
                                <textarea class="form-control" id="contract_notes" readonly></textarea>
                            </div> -->

                            <div class="mb-3">
                                <label for="sisa_kontrak" class="form-label">Sisa Nilai Kontrak</label>
                                <input type="text" class="form-control" id="sisa_kontrak" readonly>
                            </div>
                            <div class="mb-3">
                                <label for="srvperiod" class="form-label">Srv. Period</label>
                                <input type="date" class="form-control" id="srvperiod" name="srvperiod">
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="currsign" class="form-label">Currency</label>
                                    <select class="form-control" id="currsign" name="currsign" required>
                                        <option value="">-- Select Currency --</option>
                                        {% for curr in matauangs %}
                                        <option value="{{ curr.currsign }}">{{ curr.currsign }} - {{ curr.currname }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="amount" class="form-label">Invoice Amount</label>
                                    <input type="text" class="form-control currency-input" id="amount" name="amount"
                                        required>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="dpp" class="form-label">DPP/Tax Base</label>
                                    <input type="text" class="form-control currency-input" id="dpp" name="dpp" required>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="vat" class="form-label">VAT/PB1</label>
                                    <input type="text" class="form-control currency-input" id="vat" name="vat" required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="totalamount" class="form-label fw-bold">Total Amount</label>
                                <input type="text" class="form-control currency-input" id="totalamount"
                                    name="totalamount" readonly>
                            </div>


                        </div>

                        <!-- KANAN -->
                        <div class="col-md-6">
                            <div class="row">
                                <!-- KIRI -->
                                <div class="col-md-6">
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input" id="goods1" name="goods1">
                                        <label for="goods1" class="form-check-label">Goods</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods2"
                                            name="goods2" disabled>
                                        <label for="goods2" class="form-check-label">Invoice + Materai</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods3"
                                            name="goods3" disabled>
                                        <label for="goods3" class="form-check-label">Photocopy Invoice</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods4"
                                            name="goods4" disabled>
                                        <label for="goods4" class="form-check-label">Faktur Pajak (3)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods5"
                                            name="goods5" disabled>
                                        <label for="goods5" class="form-check-label">SSP (5)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods6"
                                            name="goods6" disabled>
                                        <label for="goods6" class="form-check-label">PPh 23 (Non Final)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods7"
                                            name="goods7" disabled>
                                        <label for="goods7" class="form-check-label">PPh 4(2) (Final)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods8"
                                            name="goods8" disabled>
                                        <label for="goods8" class="form-check-label">Progress Report *)**)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods9"
                                            name="goods9" disabled>
                                        <label for="goods9" class="form-check-label">Timesheet *)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods10"
                                            name="goods10" disabled>
                                        <label for="goods10" class="form-check-label">Contract Photocopy</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods11"
                                            name="goods11" disabled>
                                        <label for="goods11" class="form-check-label">Copy of Requisition Letter</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods12"
                                            name="goods12" disabled>
                                        <label for="goods12" class="form-check-label">Project Summary and MoM</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods13"
                                            name="goods13" disabled>
                                        <label for="goods13" class="form-check-label">Berita Acara</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods14"
                                            name="goods14" disabled>
                                        <label for="goods14" class="form-check-label">A.F.E</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input goods-group" id="goods15"
                                            name="goods15" disabled>
                                        <label for="goods15" class="form-check-label">Comply with PTK 007</label>
                                    </div>
                                    <div class="row align-items-center mb-3">
                                        <!-- Checkbox Goods16 -->
                                        <div class="col-auto">
                                            <input type="checkbox" class="form-check-input goods-group" id="goods16"
                                                name="goods16" disabled onchange="toggleGoodsDesc()">
                                            <label class="form-check-label" for="goods16"></label>
                                        </div>

                                        <!-- Input Goodslist1 -->
                                        <div class="col">
                                            <input type="text" class="form-control" id="goodslist1" name="goodslist1" readonly>
                                        </div>
                                    </div>
                                </div>

                                <!-- KANAN -->
                                <div class="col-md-6">
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input" id="so1" name="so1">
                                        <label for="so1" class="form-check-label">Service Order</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so2" name="so2"
                                            disabled>
                                        <label for="so2" class="form-check-label">Invoice + Materai</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so3" name="so3"
                                            disabled>
                                        <label for="so3" class="form-check-label">Photocopy Invoice</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so4" name="so4"
                                            disabled>
                                        <label for="so4" class="form-check-label">Faktur Pajak (3)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so5" name="so5"
                                            disabled>
                                        <label for="so5" class="form-check-label">SSP (5)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so6" name="so6"
                                            disabled>
                                        <label for="so6" class="form-check-label">PPh 23 (Non Final)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so7" name="so7"
                                            disabled>
                                        <label for="so7" class="form-check-label">PPh 4(2) (Final)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so8" name="so8"
                                            disabled>
                                        <label for="so8" class="form-check-label">SO Photocopy</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so9" name="so9"
                                            disabled>
                                        <label for="so9" class="form-check-label">SO Original</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so10" name="so10"
                                            disabled>
                                        <label for="so10" class="form-check-label">Copy of Requisition Letter</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so11" name="so11"
                                            disabled>
                                        <label for="so11" class="form-check-label">Service Requisition</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so12" name="so12"
                                            disabled>
                                        <label for="so12" class="form-check-label">Timesheet *)</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so13" name="so13"
                                            disabled>
                                        <label for="so13" class="form-check-label">Berita Acara</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so14" name="so14"
                                            disabled>
                                        <label for="so14" class="form-check-label">A.F.E</label>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input so-group" id="so15" name="so15"
                                            disabled>
                                        <label for="so15" class="form-check-label">Comply with PTK 007</label>
                                    </div>
                                    <div class="row align-items-center mb-3">
                                        <div class="col-auto">
                                            <input type="checkbox" class="form-check-input so-group" id="so16"
                                                name="so16" disabled onchange="toggleSoDesc()">
                                            <label class="form-check-label" for="so16"></label>
                                        </div>
                                        <div class="col">
                                            <input type="text" class="form-control" id="solist1" name="solist1" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <hr style="margin-top: 0.5rem; margin-bottom: 1rem; border-top: 1px solid #ccc;"> -->
                            <hr>
                            <p style="color: green;" class="small mt-2">Routing Slip:</p>

                            <div class="mb-3">
                                <label for="userdate" class="form-label">Sent to User</label>
                                <input type="date" class="form-control" id="userdate" name="userdate">
                            </div>
                            <div class="mb-3">
                                <label for="findate" class="form-label">Return from User</label>
                                <input type="date" class="form-control" id="findate" name="findate">
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
                <script>
                    function toggleGoodsDesc() {
                        const checkbox = document.getElementById('goods16');
                        const desc = document.getElementById('goodslist1');
                        desc.readOnly = !checkbox.checked;
                    }

                    function toggleSoDesc() {
                        const checkbox = document.getElementById('so16');
                        const desc = document.getElementById('solist1');
                        desc.readOnly = !checkbox.checked;
                    }
                </script>

            </div>
        </div>
    </div>
</div>

<script>
    function toggleGoodsGroup() {
        const goodsGroup = document.querySelectorAll('.goods-group');
        const enabled = document.getElementById('goods1').checked;
        goodsGroup.forEach(cb => cb.disabled = !enabled);
    }

    function toggleSoGroup() {
        const soGroup = document.querySelectorAll('.so-group');
        const enabled = document.getElementById('so1').checked;
        soGroup.forEach(cb => cb.disabled = !enabled);
    }

    document.getElementById('goods1').addEventListener('change', function () {
        if (this.checked) {
            // Kalau Goods dipilih, Service Order harus clear
            document.getElementById('so1').checked = false;

            document.querySelectorAll('.so-group').forEach(cb => {
                cb.checked = false;
            });
        }

        toggleGoodsGroup();
        toggleSoGroup();
    });

    document.getElementById('so1').addEventListener('change', function () {
        if (this.checked) {
            // Kalau Service Order dipilih, Goods harus clear
            document.getElementById('goods1').checked = false;

            document.querySelectorAll('.goods-group').forEach(cb => {
                cb.checked = false;
            });
        }

        toggleGoodsGroup();
        toggleSoGroup();
    });
</script>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        const vendorSelect = document.getElementById('vendorcode');
        const accountSelect = document.getElementById('accountno');

        function filterAccountOptions(selectedVendor, selectedAccount = '') {
            const accountOptions = accountSelect.querySelectorAll('option');
            let foundMatch = false;

            accountOptions.forEach(option => {
                if (option.value === "") {
                    option.hidden = false;
                    return;
                }

                const vendorMatch = option.getAttribute('data-vendor') === selectedVendor;
                option.hidden = !vendorMatch;

                if (vendorMatch && option.value === selectedAccount) {
                    foundMatch = true;
                }
            });

            if (selectedAccount && foundMatch) {
                accountSelect.value = selectedAccount;
            } else {
                accountSelect.value = "";
            }
        }

        vendorSelect.addEventListener('change', function () {
            filterAccountOptions(this.value);
        });

        function formatCurrencyValue(value) {
            if (!value) return '';
            return parseFloat(value).toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }    

        window.editinvoice = function (invoiceId) {
            const row = document.querySelector(`tr[data-id="${invoiceId}"]`);
            if (!row) return;

            document.getElementById('invoiceModalLabel').innerText = 'Edit Invoice Register';
            document.getElementById('invoiceModalLabel').style.fontWeight = 'bold';
            document.getElementById('invoiceForm').action = "{% url 'save_invoice' %}";
            document.getElementById('invoice_id').value = invoiceId;

            vendorSelect.value = row.dataset.vendorcode;
            filterContractOptions(row.dataset.vendorcode, row.dataset.contractno);

            document.getElementById('kodeinv').value = (row.dataset.kodeinv || '').trim();
            // document.getElementById('kodeinv').value = row.dataset.kodeinv;
            document.getElementById('invdate').value = row.dataset.invdate;
            document.getElementById('invno').value = row.dataset.invno;
            document.getElementById('logdate').value = row.dataset.logdate;
            document.getElementById('duedate').value = row.dataset.duedate;
            document.getElementById('description').value = row.dataset.description;
            document.getElementById('cnc').value = (row.dataset.cnc || '').trim();
            // document.getElementById('cnc').value = row.dataset.cnc;
            document.getElementById('contractno').value = row.dataset.contractno;
            fetchContractInfo(row.dataset.contractno);   // ⬅️ supaya sisa kontrak muncul juga saat edit
            document.getElementById('srvperiod').value = row.dataset.srvperiod;
            document.getElementById('currsign').value = row.dataset.currsign;
            document.getElementById('amount').value = formatCurrencyValue(row.dataset.amount);
            document.getElementById('dpp').value = formatCurrencyValue(row.dataset.dpp);
            document.getElementById('vat').value = formatCurrencyValue(row.dataset.vat);
            document.getElementById('totalamount').value = formatCurrencyValue(row.dataset.totalamount);
            document.getElementById('userdate').value = row.dataset.userdate;
            document.getElementById('findate').value = row.dataset.findate;

            for (let i = 1; i <= 16; i++) {
                document.getElementById(`goods${i}`).checked = row.dataset[`goods${i}`] === 'True';
            }
            const goodslist1 = row.dataset.goodslist1;
            document.getElementById('goodslist1').value = goodslist1 === 'None' ? '' : goodslist1;

            for (let i = 1; i <= 16; i++) {
                document.getElementById(`so${i}`).checked = row.dataset[`so${i}`] === 'True';
            }
            const solist1 = row.dataset.solist1;
            document.getElementById('solist1').value = solist1 === 'None' ? '' : solist1;

            // Sesuaikan status tombol checklist saat Edit
            toggleGoodsGroup();
            toggleSoGroup();

            const invoiceModal = new bootstrap.Modal(document.getElementById('invoiceModal'));
            invoiceModal.show();
        };
    });
</script>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        const cncSelect = document.getElementById('cnc');
        const contractSelect = document.getElementById('contractno');
        const vendorSelect = document.getElementById('vendorcode');

        function toggleContractSelect() {
            if (cncSelect.value === "Commitment") {
                contractSelect.disabled = false;
                filterContractOptions(vendorSelect.value); // filter lagi berdasarkan vendor
            } else if (cncSelect.value === "Non-Commitment") {
                contractSelect.value = "";
                contractSelect.disabled = true;
            } else {
                contractSelect.value = "";
                contractSelect.disabled = true;
            }
        }

        cncSelect.addEventListener("change", toggleContractSelect);
        vendorSelect.addEventListener("change", function () {
            if (cncSelect.value === "Commitment") {
                filterContractOptions(this.value);
            }
        });

        // Jangan panggil toggleContractSelect() di awal
        // supaya saat Add Invoice, dropdown masih bisa tampil normal sampai CNC dipilih
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const amountInput = document.getElementById('amount');
        const dppInput = document.getElementById('dpp');
        const vatInput = document.getElementById('vat');
        const totalInput = document.getElementById('totalamount');

        function parseNumber(val) {
            if (!val) return 0;
            return parseFloat(val.replace(/,/g, '')) || 0;
        }

        function formatNumber(val) {
            return val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        }

        function recalc() {
            let amount = parseNumber(amountInput.value);

            if (amount > 0) {
                let dpp = amount * 11 / 12;
                let vat = dpp * 12 / 100;
                let total = amount + vat;

                if (!dppInput.dataset.edited) dppInput.value = formatNumber(dpp);
                if (!vatInput.dataset.edited) vatInput.value = formatNumber(vat);
                if (!totalInput.dataset.edited) totalInput.value = formatNumber(total);
            }
        }

        // Hitung ulang saat amount berubah
        amountInput.addEventListener('input', recalc);

        // Tandai kalau user edit manual → jangan auto-overwrite
        [dppInput, vatInput, totalInput].forEach(input => {
            input.addEventListener('input', () => {
                input.dataset.edited = "true";
            });
        });
    });
</script>


<!-- toggleGoodsGroup();
toggleSoGroup();
toggleGoodsDesc();
toggleSoDesc(); -->

<script>
    function resetForm() {
        // Reset form values
        document.getElementById('invoiceForm').reset();

        // Reset action to add URL
        document.getElementById('invoiceForm').action = "{% url 'save_invoice' %}";

        // Set modal title to Add
        document.getElementById('invoiceModalLabel').innerText = 'Add Invoice Register';

        // Reset hidden ID
        document.getElementById('invoice_id').value = "";

        // Reset checklist Goods & Service Order
        document.getElementById('goods1').checked = false;
        document.getElementById('so1').checked = false;
        toggleGoodsGroup();
        toggleSoGroup();

        // Reset dropdowns
        document.getElementById('vendorcode').value = "";
        document.getElementById('currsign').value = "";
        document.getElementById('accountno').value = "";

        // Optional: re-filter accountno if needed
        filterAccountOptions(""); // to hide all accountno options
    }
</script>

<script>
    // Format ribuan saat user mengetik
    function formatNumber(num) {
        return num.replace(/\D/g, '')
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function formatCurrencyInput(input) {
        let value = input.value.replace(/,/g, '');
        if (!isNaN(value) && value !== "") {
            input.value = parseFloat(value).toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }
    }

    // Apply formatting as user types
    document.querySelectorAll('.currency-input').forEach(input => {
        input.addEventListener('input', () => {
            let val = input.value.replace(/[^0-9.]/g, '');
            input.value = val.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        });
    });

    // Sebelum submit: buang koma biar bisa disimpan sebagai angka
    document.getElementById('invoiceForm').addEventListener('submit', function () {
        document.querySelectorAll('.currency-input').forEach(input => {
            input.value = input.value.replace(/,/g, '');
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const vendorSelect = document.getElementById('vendorcode');
        const contractSelect = document.getElementById('contractno');

        function filterContractOptions(selectedVendor, selectedContract = '') {
            const options = contractSelect.querySelectorAll('option');
            let matchFound = false;

            options.forEach(option => {
                if (option.value === "") {
                    option.hidden = false;
                    return;
                }

                const belongsToVendor = option.getAttribute('data-vendor') === selectedVendor;
                option.hidden = !belongsToVendor;

                if (belongsToVendor && option.value === selectedContract) {
                    matchFound = true;
                }
            });

            if (selectedContract && matchFound) {
                contractSelect.value = selectedContract;
            } else {
                contractSelect.value = "";
            }
        }

        vendorSelect.addEventListener('change', function () {
            filterContractOptions(this.value);
        });

        window.filterContractOptions = filterContractOptions; // expose globally for edit
    });
</script>

<script>
    function fetchContractInfo(contractno) {
        if (!contractno) {
            document.getElementById("sisa_kontrak").value = "";
            return;
        }

        fetch(`/invoice/contract-info/${encodeURIComponent(contractno)}/`)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    document.getElementById("sisa_kontrak").value = "Not found";
                } else {
                    document.getElementById("sisa_kontrak").value =
                        new Intl.NumberFormat('en-US', { minimumFractionDigits: 2 }).format(data.sisa_kontrak);
                }
            });
    }

    document.addEventListener("DOMContentLoaded", function () {
        const contractSelect = document.getElementById("contractno");
        if (contractSelect) {
            contractSelect.addEventListener("change", function () {
                fetchContractInfo(this.value);
            });
        }
    });


    document.addEventListener("DOMContentLoaded", function () {
        const invDate = document.getElementById("invdate");
        const logDate = document.getElementById("logdate");
        const dueDate = document.getElementById("duedate");

        invDate.addEventListener("change", function () {
            if (invDate.value) {
                logDate.min = invDate.value;  // logdate tidak boleh < invdate
            } else {
                logDate.removeAttribute("min");
            }
        });

        logDate.addEventListener("change", function () {
            if (invDate.value && logDate.value < invDate.value) {
                alert("Log Date tidak boleh lebih kecil daripada Invoice Date!");
                logDate.value = "";  // reset kalau salah
            }
        });

        dueDate.addEventListener("change", function () {
            if (invDate.value && dueDate.value < invDate.value) {
                alert("Due Date tidak boleh lebih kecil daripada Invoice Date!");
                dueDate.value = "";  // reset kalau salah
            }
        });
    });

</script>

{% endblock %}